import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { Form } from 'antd'
import { widgetType } from 'constants'
import PropTypes from 'prop-types'
import Style from './store.css'

class StoreForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getStoreList: PropTypes.func,
    storeData: PropTypes.object
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {}
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getFilterCols () {
    return [
      {
        label: '输入搜索',
        id: 'searchField',
        widget: widgetType.input,
        placeholder: '请输入商品名称/商品货号'
      }, {
        label: '操作类型',
        id: 'operateType',
        widget: widgetType.select,
        placeholder: '请选择分类',
        options: [
          {
            value: 'RETURN_COMMODITY',
            text: '退货成功'
          },
          {
            value: 'ADD_COMMODITY',
            text: '添加商品'
          }
        ]
      }, {
        label: '操作时间',
        id: 'time',
        widget: widgetType.dateRangePicker,
        placeholder: '请选择'
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '编号',
        dataIndex: 'commodityCode',
        key: 'commodityCode',
        width: 100,
        sorter: (a, b) => a.commodityCode - b.commodityCode
      },
      {
        title: '商品图片',
        dataIndex: 'imgUrl',
        key: 'imgUrl',
        width: 100,
        render: text => <img className={Style['image']} src={text} />

      },
      {
        title: '商品名称',
        dataIndex: 'commodityName',
        key: 'commodityName',
        width: 100
      },
      {
        title: '货号',
        dataIndex: 'commodityNo',
        key: 'commodityNo',
        width: 100
      },
      {
        title: '订单号',
        dataIndex: 'orderId',
        key: 'orderId',
        width: 100
      },
      {
        title: '库存',
        dataIndex: 'store',
        key: 'store',
        render: (text, record) => {
          return <>
            <div >数量：{record.count}</div>
            <div >剩余：{record.stock}</div>
          </>
        },
        width: 100
      }, {
        title: '库存类型',
        dataIndex: 'stockType',
        key: 'stockType',
        width: 100
      }, {
        title: '操作类型',
        dataIndex: 'operateType',
        key: 'operateType',
        width: 100
      }, {
        title: '操作信息',
        dataIndex: 'opi',
        key: 'opi',
        width: 100,
        render: (text, row) => <div>
          <div>{row.operator}</div>
          <div>{row.operateTime}</div>
        </div>
      }
    ]
  }

  reset () {
    this.setState({
      pageNo: 1,
      pageSize: 20,
      params: {}
    })
    this.props.getStoreList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    values.startTime = values.time && values.time[0].format('YYYY-MM-DD HH:mm:ss')
    values.endTime = values.time && values.time[1].format('YYYY-MM-DD HH:mm:ss')
    delete values.time
    this.setState({
      params: values
    })
    this.props.getStoreList(values)
  }

  onPageChange (pageNo, pageSize) {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getStoreList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getStoreList(params)
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getStoreList({
      pageSize,
      pageNo
    })
  }

  render () {
    const { pageNo, pageSize } = this.state
    const { form, storeData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: storeData && storeData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }
    return (
      <>
        <ContentBox>
          <div className={Style['scenes-store']}>
            <Filters cols={this.getFilterCols()} form={form} search={this.search} reset={this.reset} />
            <CustomTable loading={!storeData} columns={this.getTableCols()} dataSource={(storeData && storeData.list) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  storeData: state.goods.storeData
})
const mapDispatch = dispatch => ({
  getStoreList: dispatch.goods.getStoreList
})

const Store = Form.create()(StoreForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Store)
)
